// import { productList } from '../data/index.js'
const { onBeforeMount, onMounted, toRefs, reactive } = Vue
export default {
  name: 'Product',
  template: '',
  components: {
    InfoItem: Vue.defineAsyncComponent(() => myImport('components/InfoItem'))
  },
  props: {
    list: Array
  },
  setup (props) {
    const data = reactive({
      currentInfo: {}
    });
    const infoList = props.list
    const useRouter = VueRouter.useRouter()
    const { onBeforeRouteUpdate } = VueRouter

    const scrollToptimer = () => {

      setInterval(function () {
        console.log("定时循环回到顶部")
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var speed = top / 4;
        if (document.body.scrollTop != 0) {
          document.body.scrollTop -= speed;
        } else {
          document.documentElement.scrollTop -= speed;
        }
        if (top == 0) {
          clearInterval(scrollToptimer);
        }
      }, 30);

    };

    const getProduct = (index) => {
      // currentProduct = props.list[index]
      data.currentInfo = props.list[index]
      onChangeImage()
      // return currentProduct
    }
    const onChangeImage = (index) => {
      document.documentElement.scrollTop = 500;
      // scrollToptimer()
    }

    onBeforeMount(() => {
      const index = useRouter.currentRoute.value.params.index
      getProduct(index)
    });
    // const productList = props.list

    // 导航守卫 监听路由变化
    onBeforeRouteUpdate((to) => {
      const index = to.params.index
      getProduct(index)
    });

    return {
      ...toRefs(data),
      infoList,
      onChangeImage
    }
  }
}
